import React, { PureComponent } from "react";
import {connect} from 'react-redux'
import {actionCreators} from '../store'
import { Link } from 'react-router-dom'
import { ListItem, ListInfo, LoadMore} from '../style'
class List extends PureComponent {
  render(){
    const {articleList, getMoreList, acticlePage} = this.props;
    return (
      <div>
        {
          articleList.map((item, index) => {
            return (
              <Link key={index} to="/detail">
                <ListItem >
                  <img className="pic" src={item.get('imgurl')} alt="x"/>
                  <ListInfo >
                    <h3 className="title">{item.get('title')}</h3>
                    <p className="desc">{item.get('desc')}</p>
                  </ListInfo>
                </ListItem>
              </Link>
            )
          })
        }
        <LoadMore onClick={() => getMoreList(acticlePage)}>加载更多</LoadMore>
      </div>
    )
  }
}
const mapState = (state) => ({
  articleList: state.getIn(['home', 'articleList']),
  acticlePage: state.getIn(['home', 'acticlePage'])
})
const mapDispath = (dispath) => ({
  getMoreList(page) {
    dispath(actionCreators.addList(page))
  }
})

export default connect(mapState, mapDispath)(List)